
<!--我的收藏界面  -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

body {
	background: none;
}

input, button, select, textarea {
	outline: none;
}

ul, li, dl, ol {
	list-style: none;
}

img {
	border: none;
}

a {
	color: #666;
	text-decoration: none;
}

.box {
	width: 896px;
	
	margin: 0 10px;
}

.bcon {
	border: 1px solid #eee;
	margin: 30px auto;
}

.bcon h1 {
	border-bottom: 1px solid #eee;
	padding: 0 10px;
}

.bcon h1 b {
	font: bold 14px/40px '宋体';
	border-top: 2px solid #3492D1;
	padding: 0 8px;
	margin-top: -1px;
	display: inline-block;
}

.bcon h1 span {
	margin: 15px 0;
	float: right;
}

.bcon h1 span em {
	width: 8px;
	height: 8px;
	background: #F0F2F3;
	border: 1px solid #E6E9EA;
	border-radius: 10px;
	margin: 0 5px;
	display: inline-block;
	cursor: pointer;
}

.bcon h1 span em.emon {
	width: 10px;
	height: 10px;
	background: #00A6EC;
	border: none;
}

.list1 {
	width: 940px;
	height: 305px;
	padding-bottom: 12px;
}

.list1 li {
	width: 220px;
	padding: 12px 0 0 12px;
	float: left;
}

.list1 li img {
	width: 208px;
	height: 130px;
	margin: 5px;
}

.list1 li p {
	height: 24px;
	font: normal 12px/24px 'Microsoft YaHei';
	color: #999;
	text-align: center;
}

.btm p {
	font: normal 12px/24px 'Microsoft YaHei';
	text-align: center;
}

/* 文章收藏 */
a {
	text-decoration: none;
}

/*娓呴櫎娴姩浠ｇ爜*/
.clearfloat:after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0
}

.clearfloat {
	zoom: 1
}

.bodybg3 {
	background: url(../images/bg3.jpg) no-repeat right top;
	background-size: cover;
}

.wallbox {
	width: 100%;
}

.hearer {
	height: 80px;
	background: #fff;
}

.hearer .nbox {
	max-width: 1240px;
	margin: auto;
	clear: both;
}

.hearer .nbox .logo {
	line-height: 80px;
	font-size: 24px;
	color: #555555;
	float: left;
}

.hearer .nbox .logo img {
	position: relative;
	top: 10px;
	width: 60px;
	margin-right: 20px;
	float: left;
}

.hearer .nbox .right-con {
	float: right;
	height: 80px;
}

.hearer .nbox .right-con a {
	color: #808080;
	line-height: 27px;
	font-size: 16px;
	padding-top: 30px;
	display: inline-block;
}

.hearer .nbox .right-con img {
	width: 20px;
	position: relative;
	top: 4px;
	margin-right: 5px;
	margin-left: 20px;
}

.cenbox3 {
	max-width: 1250px;
	min-height: 660px;
	margin: auto;
	position: relative;
	background: url(../images/bg3-3.png) no-repeat left 30px;
}

.cenbox-login {
	width: 350px;
	height: 355px;
	position: absolute;
	margin-top: -133px;
	top: 50%;
	right: 50%;
	margin-right: -170px;
	border-radius: 10px;
	background: #FFFFFF;
}

.cenbox-l2 {
	margin-top: -243px;
}

.cenbox-login .fromcon {
	padding: 20px;
}

.cenbox-login .fromcon h3 {
	font-size: 22px;
	color: #333333;
	padding-top: 5px;
	padding-bottom: 15px;
	font-weight: normal;
	font-weight: 300;
}

.cenbox-login .fromcon .textw {
	width: 300px;
	height: 36px;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	color: #222;
	line-height: 36px;
	text-indent: 35px;
	background: #eff1f3;
	position: relative;
}

.cenbox-login .fromcon .textw::placeholder {
	color: #b2b2b2;
	font-weight: 300;
}

.cenbox-login .fromcon .textw2 {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	position: relative;
	top: 4px;
}

.cenbox-login .fromcon .textw-ico {
	position: absolute;
	top: 9px;
	left: 12px;
	width: 20px;
	height: 20px;
	display: block;
	z-index: 99999;
}

.cenbox-login .fromcon .textw-btn {
	background: #369afe;
	border-radius: 3px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	display: block;
}

.cenbox-l2 .fromcon .textw-btn {
	background: url(../images/btn3.png) no-repeat;
	font-size: 16px;
	margin-top: 10px;
	color: #fff;
	font-weight: 300;
	text-align: center;
	line-height: 40px;
	display: block;
}

.cenbox-login .fromcon .zhmm-link {
	font-size: 14px;
	float: right;
	padding-top: 20px;
	color: #08a4ed;
	text-align: right;
}

.cenbox-login .fromcon ul {
	list-style: none;
	padding-top: 5px;
}

.cenbox-login .fromcon li {
	height: 43px;
	padding-bottom: 10px;
	position: relative;
	display: block;
}

.cenbox-login .fromcon li.rights {
	text-align: right;
}

.cenbox-login .fromcon li.minh {
	height: 27px;
	line-height: 22px;
	font-size: 14px;
	font-weight: 300;
	color: #333;
}

.footer {
	width: 100%;
	background: #2a2a2a;
	color: #b4b4b4;
	height: 60px;
	line-height: 60px;
	font-size: 14px;
	text-align: center;
	position: fixed;
	bottom: 0;
}

.footertwo {
	width: 100%;
	color: #fff;
	height: 60px;
	line-height: 60px;
	font-size: 14px;
	text-align: center;
	position: fixed;
	bottom: 0;
}

/*涓婚〉*/
.hearer-i {
	height: 80px;
	background: url(../images/head.png) repeat-y;
}

.hearer-i .logo {
	line-height: 80px;
	font-size: 26px;
	color: #fff;
	float: left;
	margin-left: 20px;
}

.hearer-i .logo img {
	position: relative;
	top: 17px;
	margin-right: 20px;
}

.hearer-i .right-con {
	float: right;
	background-color: rgba(255, 255, 255, .1);
	margin-right: 20px;
	height: 40px;
	width: 123px;
	margin-top: 20px;
	border-radius: 5px;
	border: 1px solid #adc3fe;
}

.hearer-i .right-con a {
	font-size: 16px;
	color: #fff;
	line-height: 40px;
	width: 122px;
	float: left;
	text-align: center;
}

.hearer-i .right-con a.barr {
	border-right: 1px solid #adc3fe;
	display: inline-block;
}

.hearer-i .right-con a img {
	position: relative;
	top: 3px;
	margin-right: 5px;
}

.hearer-i .right-con:hover {
	background-color: rgba(255, 255, 255, .09);
}

.liuc-con {
	padding: 0;
}

.liuc-con .search_box {
	background: #f9f9fa;
	padding: 18px 0;
	border-bottom: 1px solid #dfe3e5;
}

.liuc-con .search_box .s_txt {
	border: 1px solid #d6dbdd;
	color: #333333;
	font-size: 16px;
	width: 720px;
	height: 28px;
	line-height: 28px;
	padding: 5px 20px;
}

.liuc-con .search_box .juzhongbox {
	width: 860px;
	margin: auto;
}

.liuc-con .search_box .s_txt::placeholder {
	color: #b2b2b2;
	font-weight: 300;
}

.liuc-con .search_box .ss_con {
	height: 40px;
	display: block;
	position: relative;
	width: 860px;
}

.liuc-con .search_box .s_btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
	color: #FFFFFF;
	background-color: #07a3ee;
}

.liuc-con .search_box .ti_con {
	height: 32px;
	line-height: 32px;
	color: #666;
	display: block;
	position: relative;
	padding-top: 10px;
}

.liuc-con .search_box .ti_con .inp_txt {
	border: none;
	text-indent: 10px;
	width: 357px;
	background-color: #FFFFFF;
	color: #333333;
	height: 32px;
	display: inline-block;
	line-height: 32px;
	font-size: 14px;
	color: #a4a6a7;
}

.liuc-con .search_box .ti_con .inp_txt::placeholder {
	color: #b2b2b2;
	font-weight: 300;
}

.liuc_tabbox {
	width: 895px;
	padding-top: 15px;
	margin-left:0px;
}

.liuc_tabbox .tab_top {
	height: 40px;
	overflow: hidden;
	background: url(../images/liucbarr.png) repeat-x bottom;
}

.liuc_tabbox .tab_top a {
	padding: 0 10px;
	font-size: 16px;
	margin-right: 40px;
	margin-left: 10px;
	color: #999;
	font-weight: 300;
	height: 37px;
	line-height: 37px;
	float: left;
}

.liuc_tabbox .tab_top a.ved {
	border-bottom: 3px solid #07a3ee;
	color: #07a3ee;
	position: relative;
}

.liuc_tabbox .tab_bom {
	display: block;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e2e4e5;
}

.liuc_tabbox .tab_bom ul {
	margin: 0;
}

.liuc_tabbox .tab_bom li {
	display: block;
	list-style: none;
	margin-top: 20px;
	position: relative;
}

.liuc_tabbox .tab_bom li h3 {
	font-size: 16px;
	font-weight: normal;
	color: #333333;
	line-height: 18px;
}

.liuc_tabbox .tab_bom li h3 em {
	font-style: normal;
	font-weight: normal;
	color: #df514e;
}

.liuc_tabbox .tab_bom li h3 img {
	position: relative;
	top: 3px;
	margin-right: 8px;
}

.liuc_tabbox .tab_bom li p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 24px;
	color: #666666;
	display: block;
}

.liuc_tabbox .tab_bom li span {
	display: block;
	padding-top: 2px;
	line-height: 20px;
	font-size: 12px;
	color: #999999;
}

.liuc_tabbox .tab_bom li a {
	width: 84px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	background-color: #07a3ee;
	border-radius: 3px;
}

.liuc_tabbox .page_box {
	padding: 30px 0;
	display: block;
}

.liuc_tabbox .page_box a {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-weight: normal;
	border: 1px solid #dddddd;
	font-size: 16px;
	color: #999999;
	display: inline-block;
	margin: 0 7px;
}

.liuc_tabbox .page_box a:hover {
	border: 1px solid #07a3ee;
	color: #07a3ee;
}

.liuc_tabbox .page_box span {
	padding: 0 10px;
	margin-right: 10px;
	display: inline-block;
	color: #333;
	font-size: 16px;
}

.foot {
	background-color: #f9f9fa;
	display: block;
	color: #666666;
	text-align: center;
	font-size: 12px;
	line-height: 44px;
	border-top: 1px solid #dfe3e5;
}
p[id*=p]{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	width: 100%;
}
</style>
<body>
	<!--文章收藏部分  -->
	<div  class="box">
		<div class="liuc-con bleft">
			<div class="liuc_tabbox bcon">

				<div class="tab_bom">
					<ul id="one11" v-for="(m,i) in myArticle">
						<li>
							<h3>
								<img src="images/ico_w.png">{{m.utitle}}
							</h3>
							<div :id="'d'+m.uaid" style="display: none" v-html="m.ucontent"></div>
							<p :id = "'p'+m.uaid" style="display: -webkit-box"></p> <span>发布日期 ：{{m.createTime}} ｜ 观看次数 ：{{m.visit}} </span>
							<a @click="scwz(m.uaid)">删除文章</a>
						</li>
					</ul>
					
				</div>

			</div>

		</div>
	</div>
	<script type="text/javascript">
		var v = new Vue({
			el : ".box",
			data : {
				myArticle : [],
			},
			created(){
				axios.post("../userBack/show.s").then(res=>{
					this.myArticle = res.data;
				})
			},
			methods : {
				scwz(uaid){
					var params = new URLSearchParams();
					params.append("uaid",uaid);
					axios.post("../userBack/delArticle.s",params);
					axios.post("../userBack/show.s").then(res=>{
						this.myArticle = res.data;
					});
				}
			},
			updated(){
	   				for( let p of this.myArticle) {
		   				let d = document.getElementById("d"+p.uaid);
		   				let pp = document.getElementById("p"+p.uaid);
		   				console.info(d.innerText.replace(/\s+/g,""));
		   				pp.innerText = d.innerText.replace(/\s+/g,"");
		   			}
	   		}
		});
	</script>
</body>
</html>